<template>
    <view class="bodys">
        <view v-for="(items,index) in list" :key="index" class="date-box" hover-class="none">
            <view class="date-title" hover-class="none" >
                {{ items[0].browseTime }}
            </view>
        <view class="big-box" hover-class="none">
            <view v-for="item in items" class="card" @click="toDetail(item.productId)">
        <image :src="item.thumbnail" mode="aspectFit" ></image>
        <view class="" style="padding-left: 20rpx;" hover-class="none">
            <view class="btm-box" hover-class="none" >
                {{item.price}}
            </view>
        </view>
    </view>
        </view>
        </view>
    </view>
</template>
<script>
export default{
    data(){
        return{
            list: [],
            page: 1,
            SIZE: 50,
            onEnd: false,
            groupedData: {}
        }
    },
    onLoad(){
        this.getList()
    },
    onReachBottom(){
        if(this.onEnd) return
        this.page++
        this.getList()
    },
    onShow(){
    },
    methods:{
        toDetail(e){
            uni.navigateTo({
                url: `/pages/goods/detail?id=${e}`
            })
        },
        async getList(){
            const { data } = await this.$http('common.getFootprints',{
                UId:uni.getStorageSync('UId'),
                current: this.page,
                pageSize: this.SIZE
            })
            const groupedData = {};
            for (let i = 0; i < data.length; i++) {
            const item = data[i];
            const browseTime = item.browseTime;
            if (groupedData[browseTime]) {
                groupedData[browseTime].push(item);
            } else {
                groupedData[browseTime] = [item];
            }
            }
            if(this.list.length == 0 ){
            this.groupedData = groupedData
            this.list = Object.values(groupedData)
            }else{
            this.groupedData = Object.assign(this.groupedData,groupedData)
            this.list = this.list.concat(Object.values(groupedData))
            }
        }
    }
}
</script>
<style lang="scss" scoped>
  .bodys{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-top: 20rpx;
    .date-box{
        width: 100%;
        .date-title{
         margin-left: 20rpx;
         margin-bottom: 20rpx;
         font-size: 24rpx;
        }
        .big-box{
            display: flex;
            flex-wrap: wrap;
            .card{
        width: 220rpx;
        height: auto;
        // height: 250rpx;
        // background-color: red;
        margin-bottom: 20rpx;
        margin-left: 25rpx;
        image{
            width: 100%;
            height: 200rpx;
            border-radius: 20rpx;
        }
        .btm-box{
            width: 100%;
            height: 50rpx;
            border-radius: 20rpx;
            display: flex;
            align-items: center;
            color: #e84033;
            font-weight: 500;
            position: relative;
            padding-left: 30rpx;
        }
        .btm-box::before{
            content: '￥';
            position: absolute;
            width: 20rpx;
            height: 20rpx;
            border-radius: 20rpx;
            // background-color: #fff;
            top: 8rpx;
            left: 0rpx;
            font-weight: 500;
        }
    }
        }
    }
}
</style>